<template>
  <div >
    <JPortalcard :title="'客户端FeatureLayer'">
      <a-switch
        size="small"
        slot="extra"
        :loading="gisLoading"
        checked-children="gis"
        un-checked-children="gis"
        @change="handGisToggle"/>
    </JPortalcard>
  </div>
</template>

<script>
import { loadModules } from 'esri-loader'
import { portalCardMixin } from '@jxstjh/portal/lib/mixins/portalcard'
import GisDialog from './GisDialog.vue'
import { mapGetters } from 'vuex'
export default {
  // package.json中的name
  name: 'ClientFeatureLayer',
  mixins: [portalCardMixin],
  components: {
  },
  data () {
    return {
      $immediateClick: undefined,
      gisLoading: false
    }
  },
  props: {
    msg: {
      type: String,
      default: null
    }
  },
  computed: {
    ...mapGetters({
      gisView: 'gisView',
      gisMap: 'gisMap'
    })
  },
  created () {
    console.log('created')
    console.log(this.GET_USER_INFO())
    console.log(this.GET_AUTH_TOKEN())
    // this.$message.info('hello word 组件来自远程.共享基座项目vue实例!')
  },
  methods: {
    handGisToggle (e) {
      e ? this.mock_shuiku() : this.delLayer()
    },
    async mock_shuiku () {
      const map = this.gisMap
      const view = this.gisView
      if (map.findLayerById('yj-fl-layer')) {
        return
      }
      this.gisLoading = true
      view.goTo({
        center: [116, 27],
        zoom: 2
      }, { duration: 1500 }).then(() => { this.gisLoading = false })
      console.log(map)
      const [Graphic, FeatureLayer] = await loadModules([
         'esri/Graphic', 'esri/layers/FeatureLayer'
      ])

      const graphic1 = new Graphic({
        geometry: {
          type: 'point',
          // latitude: 11,
          // longitude: 22
          x: 116,
          y: 27
        },
        attributes: {
          id: '11-11',
          data: 'msg'
        }
      })
      const graphic2 = new Graphic({
        geometry: {
          type: 'point',
          // latitude: 11,
          // longitude: 22
          x: 115.8,
          y: 27
        },
        attributes: {
          id: '22-11',
          data: 'msg2'
        }
      })
      const fl = new FeatureLayer({
          id: 'yj-fl-layer',
          source: [graphic1, graphic2], // array of graphics objects
          objectIdField: 'id',
          fields: [{
            name: 'id',
            type: 'oid'
          }, {
            name: 'data',
            type: 'string'
          }]
      })
      fl.on('layerview-create', (e) => {
        console.log('layerview-create', e)
        this.gisLoading = false
      })
      map.add(fl)
      this.$immediateClick = view.on('immediate-click', (event) => {
        view.hitTest(event)
          .then((e) => {
              // 仅仅是为了演示,生产环境请额外判断图层id 以防响应其它卡片图层的绘制物体
              // 详见http://guining.gitee.io/jxstjh-portal/#/docs/vue/api-gis-cn/
              if (e.results && e.results.length > 0) {
              this.openDialog()
              }
            })
      })
    },
    openDialog () {
      this.$dialog(GisDialog,
        // component props
        {
          pointId: '2221',
          on: {
            ok (record) {
              console.log('ok 回调', record)
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '弹窗',
          width: 90 + '%',
          // height: 80 + '%',
          footer: () => '',
          centered: true,
          maskClosable: false,
          mask: false,
          dialogClass: 'JPortal-GIS'
        })
    },
    delLayer () {
      const map = this.gisMap
      const view = this.gisView
      if (map.findLayerById('yj-fl-layer')) {
          map.remove(map.findLayerById('yj-fl-layer'))
          if (this.$immediateClick) {
            this.$immediateClick.remove()
            this.$immediateClick = undefined
          }
          this.gisLoading = true
          view.goTo({
            center: [116, 27],
            zoom: 1
        }, { duration: 1500 }).then(() => { this.gisLoading = false })
      }
    }
  }
}
</script>
<style lang="less"  scoped>
  /* 如果你的组件有主题化需求
  *  @import '~@jxstjh/ant-design-vue/lib/style/themes/default.less';
  *
  *   .hello{
  *     color: @primary-color
  *   }
  *
  */
  .hello{
    color:red
  }
</style>
